
<template>
  <div>
    <Button type="primary" @click="modalForm=true">添加数据</Button>
    <Button type="primary" @click="removes">删除多个</Button>
    <Input v-model="searchBox" placeholder="搜索框" style="width: 200px;float:right" suffix="ios-search"  />
    <Button type="primary" @click="onSearch" style="float:right; margin-right:10px">搜索</Button>
    <Table border :columns="columns" :data="data" @on-select="onSelect"></Table>
    <Page :total="total" :page-size="rows" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange"       show-sizer />

    <Modal v-model="modalForm" title="数据操作">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="name">
          <Input v-model="formValidate.name" placeholder="输入你的姓名"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input v-model="formValidate.password" placeholder="输入你的密码"></Input>
        </FormItem>
        <FormItem label="邮箱" prop="email">
          <Input v-model="formValidate.email" placeholder="输入你的邮箱"></Input>
        </FormItem>
        <FormItem label="电话号码" prop="tel">
          <Input v-model="formValidate.tel" placeholder="输入你的电话号码"></Input>
        </FormItem>
        <FormItem label="年龄" prop="age">
          <Input v-model="formValidate.age" placeholder="输入你的年龄"></Input>
        </FormItem>
        <FormItem label="地址" prop="address">
          <Select v-model="formValidate.address" placeholder="选择你所在的城市">
            <Option value="北京">北京</Option>
            <Option value="上海">上海</Option>
            <Option value="深圳">深圳</Option>
            <Option value="广州">广州</Option>
            <Option value="杭州">杭州</Option>
          </Select>
        </FormItem>
        <FormItem label="性别" prop="sex">
          <RadioGroup v-model="formValidate.sex">
            <Radio label="男">男</Radio>
            <Radio label="女">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="hobby" prop="hobby">
            <!-- <CheckboxGroup v-model="formValidate.hobby">
                <Checkbox label="电脑"></Checkbox>
                <Checkbox label="睡觉"></Checkbox>
                <Checkbox label="跑步"></Checkbox>
                <Checkbox label="游泳"></Checkbox>
                <Checkbox label="爬山"></Checkbox>
                <Checkbox label="旅游"></Checkbox>
                <Checkbox label="滑雪"></Checkbox>
              </CheckboxGroup> -->
              <Input v-model="formValidate.hobby" placeholder="输入你的爱好"></Input>
            </FormItem>
            <FormItem label="个性签名" prop="introduce">
              <Input v-model="formValidate.introduce" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入你的个性签名..."></Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
              <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>
            <Input name="date" type="hidden"></Input>
          </Form>
          <div slot="footer">
            不显示按钮
          </div>
        </Modal>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            searchBox:'',
            formValidate: {
              name: "",
              password:"",
              age:"",
              email: "",
              tel:"",
              address: "",
              sex: "",
              hobby: "",
              date: "",
              introduce: ""
            },
            ruleValidate: {
              name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
              password: [{ required: true, message: "请输入密码", trigger: "blur" }],
              age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
              tel: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
              email: [
              { required: true, message: "请输入邮箱", trigger: "blur" },
              { message: "Incorrect email format", trigger: "blur" }
              ],
              address: [{ required: true, message: "请输入城市", trigger: "change" }],
              sex: [{ required: true, message: "请选择性别", trigger: "change" }],
              hobby: [{ required: true, message: "请输入爱好", trigger: "change" } ],
              introduce: [
              { required: true, message: "请输入您的个性签名", trigger: "blur" },
              {
                type:"string",
                min: 5,
                message: "Introduce no less than 5 words",
                trigger: "blur"
              }
              ]
            },
            columns: [
            {
              type:'selection',
              width:60,
              align:'center'
            },
            {
              title: "姓名",
              key: "name"
            },
            {
              title: "密码",
              key: "password"
            },
            {
              title: "年龄",
              key: "age"
            },
            {
              title: "地址",
              key: "address"
            },
            {
              title: "电话号码",
              key: "tel"
            },
            {
              title: "个性签名",
              key: "introduce"
            },
            {
              title: "爱好",
              key: "hobby"
            },
            {
              title: "性别",
              key: "sex"
            },
            {
              title: "邮箱",
              key: "email"
            },
            {
              title: "注册时间",
              key: "date"
            },
            {
              title: "操作",
              key: "action",
              width: 200,
              align: "center",
              render: (h, params) => {
                return h("div", [
                  h(
                    "Button",
                    {
                      props: {
                        type:"primary",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px"
                      },
                      on: {
                        click: () => {
                          this.show(params.index);
                        }
                      }
                    },
                    "详情"
                    ),
                  h(
                    "Button",
                    {
                      props: {
                        type:"error",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px"
                      },
                      on: {
                        click: () => {
                          this.remove(params.row._id);
                        }
                      }
                    },
                    "删除"
                    ),
                  h(
                    "Button",
                    {
                      props: {
                        type:"primary",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px"
                      },
                      on: {
                        click: () => {
                          this.edit(params.row._id);
                        }
                      }
                    },
                    "修改"
                    ),
                  ]);
              }
            }
            ],
            data: [],
            total: 0,
            page: 1,
            rows: 5,
            modalForm: false,
            ids:[]
          };
        },
        methods: {
    //修改和添加
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if(this.formValidate._id){
            this.axios({
              url:`http://10.31.162.59:3000/user/data/${this.formValidate._id}`,
              method:'put',
              data:this.formValidate
            }).then(res=>{
              this.modalForm = false;
              this.getData();
              this.formValidate = {};
            })
          }else{
            this.axios({
              url:`http://10.31.162.59:3000/user/data`,
              method:'post',
              data:this.formValidate
            }).then(res=>{
              this.modalForm = false;
              this.getData();
            })
          }
        } else {
          this.$Message.error("请确认填写完成!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    show(index) {
      this.$Modal.info({
        title: "用户详情",
        content: `
        Name：${this.data[index].name}<br>
        Age：${
          this.data[index].age
        }<br>Password：${
          this.data[index].password
        }<br>Age：${
          this.data[index].age
        }<br>Address：${
          this.data[index].address
        }<br>Tel：${
          this.data[index].tel
        }<br>Introduce：${
          this.data[index].introduce
        }<br>Hobby：${
          this.data[index].hobby
        }<br>Sex：${
          this.data[index].sex
        }<br>E-mail：${
          this.data[index].email
        }<br>Createtime：${
          this.data[index].date
        }<br>`
      });
    },
    //点击修改过后弹出相应的对话框
    edit(id) {
      this.axios({
        url:`http://10.31.162.59:3000/user/data/${id}`,
        method:'put'
      }).then(res=>{
        this.formValidate = res.data;
        this.modalForm = true;
      })
    },
    //删除单个
    remove(id) {
      this.$Modal.confirm({
        title: "确认操作",
        content: "<p>你确认删除吗</p>",
        onOk: () => {
          this.axios({
            url: `http://10.31.162.59:3000/user/data/${id}`,
            method: "delete"
          }).then(res => {
            this.getData();
          });
        },
        onCancel: () => {
          this.$Message.info("删除取消");
        }
      });
    },
    //得到数据
    getData() {
      this.axios({
        url: `http://10.31.162.59:3000/user/list`,
        method: "post",
        data: {
          page: this.page,
          rows: this.rows
        }
      }).then(res => {
        this.total = res.data.total;
        this.data = res.data.rows;
      });
    },
    onChangePage(page) {
      this.page = page;
      this.getData();
    },
    onPageSizeChange(rows) {
      this.rows = rows;
      this.getData();
    },
    onSelect(selections){
      var ids = [];
      for(let i =0; i<selections.length; i++){
        ids.push(selections[i]._id);
      }
      this.ids = ids.toString();
    },
    //删除多个
    removes(){
     this.$Modal.confirm({
      title: "确认操作",
      content: "<p>你确认删除吗</p>",
      onOk: () => {
        this.axios({
          url: `http://10.31.162.59:3000/user/data/removes`,
          method: "post",
          data:{
            ids:this.ids
          }
        }).then(res => {
          this.getData();
        });
      },
      onCancel: () => {
        this.$Message.info("删除取消");
      }
    });
   },
    //搜索
    onSearch(){
     this.axios({
       url:`http://10.31.162.59:3000/user/list`,
       method:'post',
       data:{
        name:this.searchBox,
        page: this.page,
        rows: this.rows
      }
    }).then(res => {
      this.total = res.data.total;
      this.data  = res.data.rows;
    });
  },
},
mounted() {
  this.getData();
},
};
</script>


